<template>
	<view class="container">
		<view class="about-card">
			<text class="about-card-text">
				本APP是用于通过WebSocket协议与服务器进行通讯，
				获取机器人、PLC、工业相机等仪器的数据，
				本APP不直接与以上仪器进行通讯，而是通过上位机服务器进行转接。
			</text>
		</view>
		<view class="about-card">
			<view class="about-card">
				<text class="about-card-text">
					通讯网络示意简图
				</text>
			</view>
			<image src="/static/nettopo.png" mode="aspectFit"></image>
		</view>
		<view class="about-card-btns">
			<view>
				<button @click="exitApp">退出程序</button>
			</view>
			<view>
				<button @click="popupwin">查看协议</button>
				<uni-popup ref="popup" type="bottom" background-color="#fff">
					<view>
						<text class="about-card-text">APP用户协议:</text>
						<view class="about-card-popup">
							<text>
								本协议是关于用户使用APP过程中，产生的工艺数据，有可能会存储到用户本地。
								又或者会因为网络通讯问题，而产生数据丢失，因此请用户在进行通讯，尤其进行
								设备控制时，注意安全问题。
							</text>
						</view>
					</view>
				</uni-popup>
			</view>
			
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			exitApp(){
				// #ifdef APP-PLUS
					console.log(plus.os.name);
				    if (plus.os.name === 'Android') {
				      plus.runtime.quit();
				    } else {
				      // iOS: 跳转到首页或提示用户手动关闭
				      uni.reLaunch({ url: '/pages/index/index' });
				    }
				// #endif
				 
				 // 非APP环境（如H5/小程序）
				// #ifndef APP-PLUS
				    uni.showToast({ title: '当前环境不支持退出', icon: 'none' });
				// #endif
			},
			popupwin(){
				this.$refs.popup.open('top')
			}
		}
	}
</script>

<style scoped>
	.container{
		background-color: #55aaff;
	}
	.about-card {
	  margin: 20rpx;
	  padding: 20rpx;
	  background-color: #f9f9f9;
	  border-radius: 10rpx;
	  gap:5px;
	}
	.about-card-text {
	  font-size: 30rpx;
	  font-weight: bold;
	  margin-bottom: 15rpx;
	}
	.about-card-btns{
		display: flex;
		flex-direction: column;
		margin: 20rpx;
		padding: 20rpx;
		gap: 10px;
	}
	.about-card-popup{
		margin: 20rpx;
		padding: 20rpx;
		background-color: #f9f9f9;
		border-radius: 10rpx;
		gap:5px;
		background-color: #ffbe18;
	}
</style>
